import React, { Component } from 'react';
import logo from '../logo.svg'
import './Class.scss'
class Classs extends Component {
    constructor(props){
        super(props)
        this.state={
            currentIndex:0,
            list:[
                {
                    name:"活动专区",
                    list:[
                        {pic:logo,name:"卸妆"},
                        {pic:logo,name:"洁面/去角质"},
                        {pic:logo,name:"爽肤水/喷雾"},
                        {pic:logo,name:"乳液"},
                        {pic:logo,name:"精华/精油"},
                        {pic:logo,name:"面霜"},
                    ]
                },
                {
                    name:" 美容护肤",
                    list:[
                        {pic:logo,name:"面膜"},
                        {pic:logo,name:"防晒隔离"},
                        {pic:logo,name:"润唇膏"},
                        {pic:logo,name:"唇膜"},
                        {pic:logo,name:"面部套装"},
                        {pic:logo,name:"其他面部"},
                    ]
                },
                {
                    name:" 彩妆",
                    list:[
                        {pic:logo,name:"彩妆1"},
                        {pic:logo,name:"彩妆2"},
                        {pic:logo,name:"彩妆3"},
                        {pic:logo,name:"彩妆4"},
                        {pic:logo,name:"彩妆5"},
                        {pic:logo,name:"彩妆6"},
                    ]
                },
                {
                    name:" 香水",
                    list:[
                        {pic:logo,name:"香水1"},
                        {pic:logo,name:"香水2"},
                        {pic:logo,name:"香水3"},
                        {pic:logo,name:"香水4"},
                        {pic:logo,name:"香水5"},
                        {pic:logo,name:"香水6"},
                    ]
                },
            ]
        }
    }

    handleClick(index){
        this.setState({
            currentIndex:index,
        })
    }
    render() {
        return (
            <div className='classs'>
                <div className='left'>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                <div className='container' style={{backgroundColor : this.state.currentIndex === index ? 'white' : ''}}>
                                    <div className={`item ${this.state.currentIndex === index ? 'active' : ''}`} onClick={()=>{this.handleClick(index)}}>{item.name}</div>
                                </div>
                            )
                        })
                    }

                </div>
                <div className='right'>
                    {
                        this.state.list[this.state.currentIndex].list.map((item)=>{
                            return (
                                <div className='container'>
                                    <img src={item.pic} alt="" />
                                    <div>{item.name}</div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Classs;